import React, { useEffect, Fragment, useState } from 'react';
import Modal from '../../../UIComponent/Modal.jsx';
import ListCell from '../../../UIComponent/ListCell.jsx';
import PickerView from '../../../UIComponent/PickerView';
import '../../../UIComponent/PickerView.css';
import { fetchContributionList, updateContributionRule } from '../api';
import PropTypes from 'prop-types';

const values = [0, 1, 2, 5, 10, 20, 30, 40, 50].map(value => ({ label: value, value }));
ContributionModal.PropTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func.isRequired,
    onOk: PropTypes.func.isRequired
};
export default function ContributionModal(props) {
    const [contributionVisible, setContributionVisible] = useState(false); // 设置贡献值显示
    const [clockInVisible, setClockInVisible] = useState(false); // 设置每份打卡显示
    const [noteVisible, setNoteVisible] = useState(false); // 设置每份笔记显示
    const [clockInPickerValue, setClockInPickerValue] = useState(0); // 设置打卡贡献值
    const [notePickerValue, setNotePickerValue] = useState(0); // 设置笔记贡献值
    const [scoreNote, setScoreNote] = useState(0);
    const [scoreClockIn, setScoreClockIn] = useState(0);
    useEffect(() => {
        fetchContributionList().then(result => {
            const score_note = _.get(result.data, [0, 'rule', 'score_note']) || 0;
            const score_clock_in = _.get(result.data, [0, 'rule', 'score_clock_in']) || 0;
            setClockInPickerValue(score_clock_in && Number(score_clock_in));
            setNotePickerValue(score_note && Number(score_note));
            setScoreNote(score_note && Number(score_note));
            setScoreClockIn(score_clock_in && Number(score_clock_in));
        });
    }, []);
    useEffect(() => {
        setContributionVisible(props.visible);
    }, [props.visible]);
    function onUpdateContributionRule() {
        updateContributionRule({ score_clock_in: scoreClockIn, score_note: scoreNote })
            .then((result) => {
                props.onOk();
            });
    }
    function onOkNotePicker() {
        setScoreNote(notePickerValue);
        setNoteVisible(false);
    }
    function onOkClockInPicker() {
        setScoreClockIn(clockInPickerValue);
        setClockInVisible(false);
    }
    return (
        <Fragment>
            {contributionVisible && <Modal
                visible={contributionVisible}
                title='贡献值'
                onCancel={() => props.onCancel()}
                onOk={() => onUpdateContributionRule()}
            >
                <ListCell label='每次打卡' footer={scoreClockIn} onClick={() => setClockInVisible(true)} />
                <ListCell label='每份笔记' footer={scoreNote} onClick={() => setNoteVisible(true)} />
                <div style={{ padding: 5, color: '#808080' }}>
                    <div>注：</div>
                    <div>贡献值记分规则更改后将从更改日起开始新规则贡献值记分，规则更改前的贡献值分将保持不变</div>
                </div>
            </Modal>}
            {clockInVisible && <Modal
                visible={contributionVisible}
                title='每次打卡贡献值'
                onCancel={() => setClockInVisible(false)}
                onOk={() => onOkClockInPicker()}
            >
                <PickerView
                    data={values}
                    cascade={false}
                    value={[clockInPickerValue]}
                    onScrollChange={(e) => setClockInPickerValue(e[0])}
                />
            </Modal>}
            {noteVisible && <Modal
                visible={noteVisible}
                title='每份笔记贡献值'
                onCancel={() => setNoteVisible(false)}
                onOk={() => onOkNotePicker()}
            >
                <PickerView
                    data={values}
                    cascade={false}
                    onScrollChange={(e) => setNotePickerValue(e[0])}
                    value={[notePickerValue]}
                />
            </Modal>}
        </Fragment>
    )
}
